//在组件挂载时显示loading
import React, { useState, useEffect } from 'react';

const HOC = (Component: any) => {
  return function Enchancecomponent(props: any) {
    const [loading, setLoadong] = useState(true);

    useEffect(() => {
      //模拟数据加载延迟
      const fetchData = async () => {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        setLoadong(false);
      };

      fetchData();
    }, []);
    return loading ? <p>loading....</p> : <Component {...props}></Component>;
  };
};

const DisplayData = () => {
  return (
    <div>
      <h1>数据加载成功</h1>
      <p>这是真实的内容.....</p>
    </div>
  );
};
//增强显示数据的组件
const HOC1 = HOC(DisplayData);
export default HOC1;
